<template>
  <div>
    <div class="whole">
      <div class="left">
        <div style="background: rgb(212,236,250);height: 40px;line-height:40px;text-align: center">{{ machineInfo }}</div>
        <BaseTableCheck
          ref="lefttable"
          :data="tableData"
          :columns="columns"
          :tableHT="tableHeight"
          :pagination="false"
          @checkId="leftSelectCheck"
        ></BaseTableCheck>
      </div>
      <div class="center" :style="{height: tableHeight + 'px'}">
        <el-button style="margin-top: 250px" size="mini" @click="addToRight">加入右侧<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        <el-button style="margin-top: 30px" icon="el-icon-arrow-left" size="mini" @click="addToledt">加入左侧</el-button>
      </div>
      <div class="right">
        <div style="background: rgb(212,236,250);height: 40px;line-height:40px;"><span style="margin-left:8px">已配工机械</span></div>
        <BaseTableCheck
          ref="righttable"
          :data="dispatchedTableData"
          :columns="dispatchedColumns"
          :tableHT="tableHeight"
          :pagination="false"
          @checkId="rightSelectCheck"
        ></BaseTableCheck>
      </div>
    </div>
    <div class="demo-drawer__footer">
      <el-button
        size="small"
        type="primary"
        @click="updateById()"
      >保 存</el-button>
    </div>
  </div>
</template>
<script>
import BaseTableCheck from '@/components/BaseTable/baseTablecheck'
import BaseTable from '@/components/BaseTable'
import api from '@/api/Product/secondryDispenser/index'
export default {
  components: { BaseTable,BaseTableCheck },
  props: {
    shipInfo: {
      type: Object
    },
    colseDrawer: {
      type: Function
    }
  },
  data() {
    return {
      tableData: [],
      columns: [
        {
          prop: 'equipmentTypeName',
          label: '机械类型',
        },
        {
          prop: 'equipmentNo',
          label: '机械编号',
        },
      ],
      tableHeight: window.innerHeight - 150,
      dispatchedTableData: [],
      dispatchedColumns: [
        {
          prop: 'equipmentTypeName',
          label: '机械类型',
        },
        {
          prop: 'equipmentNo',
          label: '机械编号',
        },
        {
          prop: 'position',
          label: '机械位置',
          render: (h,params) => {
            return h('el-select', {
              props: {
                value: params.row.position,
                size: 'mini',
                filterable:true,
                clearable:true,
              },
              on: {
                'change': e => {
                  console.log(e)
                  this.setPosition(e,params.row.index)
                },
              }
            }, this.positionList.map((item) => {
              return h('el-option', {
                props: {
                  value: item.value,
                  label: item.label,
                  size: 'mini'
                }
              })
            }))
          }
        },
        /*{
          prop: '',
          label: '外雇',
          render: (h,params) => {
            return h('el-checkbox', {
              props: {
                value: params.row.isExternal == 'Y' ? true : false,
              },
              on: {
                'change': e => {
                  console.log(e)
                  this.dispatchedTableData[params.row.index].isExternal = e ? 'Y' : 'N'
                }
              }
            })
          }
        },*/
        {
          prop: '',
          label: '司机',
          render: (h,params) => {
            return h('el-select', {
              props: {
                value: params.row.operatorsId,
                size: 'mini',
                filterable:true,
                clearable:true,
              },
              on: {
                'change': e => {
                  console.log(e)
                  this.setDriver(e,params.row.index)
                },
              }
            }, this.drivers.map((item) => {
              return h('el-option', {
                props: {
                  value: item.driverId,
                  label: item.driverName,
                  size: 'mini'
                }
              })
            }))
          }
        },
      ],
      formValue: this.shipInfo,
      leftCheck: [], //左侧选中的复选框
      rightCheck: [], //右侧选中的复选框
      drivers: [], // 司机列表
      // 机械位置
      positionList: [
        {
          value: '1',
          label: '前沿',
        },
        {
          value: '2',
          label: '转运',
        },
        {
          value: '3',
          label: '后场',
        },
        {
          value: '6',
          label: '辅助',
        },
      ],
      machineInfo: '',
    }
  },
  created() {
    this.queryMachine()
    this.getDriver()
    this.queryDispenserMachine()
    this.querSelectedMachine()
  },
  methods: {
    // 获取设备列表
    queryMachine () {
      if (this.$refs.lefttable)
        this.$refs.lefttable.clearSelection()
      this.leftCheck = []
      let params = {
        cooperationCode: this.formValue.cooperationCode?this.formValue.cooperationCode:'',
        deptCode: this.formValue.deptCode?this.formValue.deptCode:'',
      }
      api.queryEquipment(params).then(res => {
        if (res.data.code != '0000') {
          this.$message.error(res.data.msg)
          return
        }
        this.tableData = res.data.data
      })
    },
    // 获取已配工机械
    queryDispenserMachine () {
      if (this.$refs.righttable)
        this.$refs.righttable.clearSelection()
      this.rightCheck = []
      api.queryMechanicalDispatch(this.formValue.id).then(res => {
        if (res.data.code != '0000') {
          this.$message.error(res.data.msg)
        }
        this.dispatchedTableData = res.data.data
        this.dispatchedTableData.forEach(v => {
          v.equipmentTypeId = v.equipmentTypeId + ''
          v.position = v.position?v.position + '':''
        })
      })
    },
    // 获取司机
    getDriver () {
      let params = {
        deptCode: this.shipInfo.deptCode,
        cooperationCode: this.shipInfo.cooperationCode,
      }
      api.queryDriver(params).then(res => {
        this.drivers = res.data.data
      })
    },
    // 右侧选中复选框
    rightSelectCheck (val) {
      console.log(val)
      this.rightCheck = val
    },
    // 左侧选中复选框
    leftSelectCheck (val) {
      console.log(val)
      this.leftCheck = val
    },
    // 加入右侧
    addToRight () {
      var datalist = []
      if (this.leftCheck && this.leftCheck.length == 0)
        return
      this.leftCheck.forEach(v => {
        var obj = {}
        obj.equipmentId = v.equipmentId + ''
        obj.equipmentNo = v.equipmentNo
        obj.equipmentTypeId = v.equipmentTypeId
        obj.equipmentTypeName = v.equipmentTypeName
        obj.position = ''
        obj.isExternal = 'N'
        obj.operatorsId = ''
        obj.operatorsName = ''
        datalist.push(obj)
      })
      if (this.dispatchedTableData && this.dispatchedTableData.length > 0) {
        datalist.forEach(v => {
          this.dispatchedTableData.push(v)
        })
      } else {
        this.dispatchedTableData = datalist
      }
      
      this.$refs.lefttable.clearSelection()
    },
    // 加入左侧
    addToledt () {
      if (this.rightCheck && this.rightCheck.length == 0)
        return
      let data = this.dispatchedTableData
      let set1 = new Set(this.rightCheck)
			let set2 = new Set(this.dispatchedTableData)

			let subset = []

			for (let item of set2) {
				if (!set1.has(item)) {
					subset.push(item)
				}
			}
      this.dispatchedTableData = subset
      this.$refs.righttable.clearSelection()
    },
    // 选中位置
    setPosition (val,index) {
      console.log(index)
      this.dispatchedTableData[index].position = val
    },
    // 选中司机
    setDriver (val,index) {
      console.log(index)
      this.dispatchedTableData[index].operatorsId = val
      this.dispatchedTableData[index].operatorsName = this.drivers.filter(v => val == v.driverId)[0].driverName
    },
    // 新增 编辑
    addUpdate () {
      if (this.dispatchedTableData && this.dispatchedTableData.length == 0)
        return
      if (this.dispatchedTableData && this.dispatchedTableData[0].id) {
        this.updateById()
      } else {
        this.add()
      }
      
    },
    // 新增
    add () {
      let data = this.dispatchedTableData
      data.forEach(v => {
        v.dispatchLevel = '2'
        v.planId = this.formValue.id,
        v.dispatchType = '1'
      })
      var num = 0
      data.forEach(v => {
        if (!v.operatorsId)
          num += 1
      })
      if (num > 0) {
        return this.$message.warning('请选择司机信息')
      }
      api.insert(data).then(res => {
        this.$message.success('新增成功')
        this.colseDrawer()
      })
    },
    // 编辑
    updateById () {
      let data = this.dispatchedTableData
      var num = 0
      data.forEach(v => {
        if (!v.operatorsId)
          num += 1
      })
      if (num > 0) {
        return this.$message.warning('请选择司机信息')
      }
      data.forEach(v => {
        v.dispatchLevel = '2'
        v.planId = this.formValue.id,
        v.dispatchType = '1'
      })
      let params = {
        planId: this.formValue.id,
        list: data
      }
      api.updatebyid(params).then(res => {
        if (res.data.code != '0000') {
          return this.$message.error(res.data.msg)
        }
        this.$message.success('保存成功')
        this.colseDrawer()
      })
    },
    // 获取所选的机械
    querSelectedMachine () {
      console.log(this.formValue.id)
      api.querySplicing(this.formValue.id).then(res => {
        if (res.data.code != '0000') {
          return this.$message.error(res.data.msg)
        }
        this.machineInfo = res.data.data
      })
    }
  }
}
</script>
<style lang="less" scoped>
.whole{
  width: 100%;
}
.left{
  width: 38%;
  float: left;
}
.center{
  width: 12%;
  float: left;
  text-align: center;
}
.right{
  float: left;
  width: 50%;
}
</style>
